<template>
	<div class="banner">
		<div class="banner-show">
			<ul class="banner-list">
				<li class="active-banner">
					<a href="javascript:;">
						<img src="../img/banner2-1.jpg" alt="" />
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="../img/banner2-2.jpg" alt="" />
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="../img/banner2-3.jpg" alt="" />
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="../img/banner2-4.jpg" alt="" />
					</a>
				</li>
			</ul>
			<div class="dot">
				<a class="active-dot" href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
			<div class="cw">
				<div class="banner-nav">
					<div class="top">
						<i class="fa fa-bars"></i>
						<span>全部商品</span>
					</div>
					<!--nav 导航具体分类-->
					<div class="navs">
						<ul class="navs-type">
							<li>
								<div class="show-goods">
									<i class="fa fa-calendar-plus-o fl nav-icon"></i>
									<span>医疗器械</span>
									<i class="fa fa-angle-right fr nav-icon2"></i>
								</div>
								<div class="right-hide">
									具体商品内容111
								</div>
							</li>
							<li>
								<div class="show-goods">
									<i class="fa fa-id-card-o fl nav-icon"></i>
									<span>西药品</span>
									<i class="fa fa-angle-right fr nav-icon2"></i>
								</div>
								<div class="right-hide">
									具体商品内容222
								</div>
							</li>
							<li>
								<div class="show-goods">
									<i class="fa fa-archive fl nav-icon"></i>
									<span>保健产品</span>
									<i class="fa fa-angle-right fr nav-icon2"></i>
								</div>
								<div class="right-hide">
									具体商品内容333
								</div>
							</li>
							<li>
								<div class="show-goods">
									<i class="fa fa-line-chart fl nav-icon"></i>
									<span>术后恢复</span>
									<i class="fa fa-angle-right fr nav-icon2"></i>
								</div>
								<div class="right-hide">
									具体商品内容444
								</div>
							</li>
							<li>
								<div class="show-goods">
									<i class="fa fa-bed fl nav-icon"></i>
									<span>家居医疗</span>
									<i class="fa fa-angle-right fr nav-icon2"></i>
								</div>
								<div class="right-hide">
									具体商品内容555
								</div>
							</li>
							<li>
								<div class="show-goods">
									<i class="fa fa-map fl nav-icon"></i>
									<span>体检设备</span>
									<i class="fa fa-angle-right fr nav-icon2"></i>
								</div>
								<div class="right-hide">
									具体商品内容666
								</div>
							</li>
							<li>
								<div class="show-goods">
									<i class="fa fa-medkit fl nav-icon"></i>
									<span>中医保健</span>
									<i class="fa fa-angle-right fr nav-icon2"></i>
								</div>
								<div class="right-hide">
									具体商品内容777
								</div>
							</li>
						</ul>						
						<span class="nav-bar"></span>
					</div>
				</div>
				<div class="banner-more">
					
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	window.onload = function(){
		$('.dot a').mouseover(function(){
			var _index = $(this).index(),_this = this;
			tabBanner(_this,_index);
			num=_index;
		});
		$('.banner-list').mouseover(function(){
			clearInterval(timer);
		});
		$('.banner-list').mouseleave(function(){
			autoPlay();
		});
		
		//轮播图切换
		function tabBanner(obj,n){
			$('.banner-list>li').removeClass('animated zoomOut');
			$('.dot a').removeClass('active-dot');
			$(obj).addClass('active-dot');
			$('.banner-list>li').not($('.banner-list>li').eq(n)).addClass('animated zoomOut');
		}
		
		//自动轮播
		var num = 0;
		function autoPlay(){
			timer = setInterval(function(){
				num==3?num=0:num++;
				var that = $('.dot a').eq(num);
				tabBanner(that,num);
			},3000)
		}
		autoPlay();
		
		$('.navs-type>li').mouseover(function(){
			var _index = $(this).index()+1;
			$('.nav-bar').css('top',_index*40)
		});
		
		$('.banner-nav').mouseleave(function(){
			$('.nav-bar').css('top',0);
		})
	}
</script>

<style scoped>
	.banner-show{
		margin-top:20px;
		border-top:2px solid black;
		width:100vw;
		height:400px;
		position: relative;
	}
	
	/*轮播图*/
	.banner-list{
		position: relative;
		height:400px;
	}
	.banner-list li,.banner-list a,.banner-list img{
		display: inline-block;
		width:100%;
		height:400px;
		position: absolute;
		left: 0;
		top:0;
	}
	.animated{
		animation-duration:2s;
	}
	.zoomOut{
		z-index: 3;
	}
	.dot{
		width:200px;
		height:15px;
		position: absolute;
		z-index: 10;
		bottom:10px;
		left:50%;
		margin-left:-100px;
		background:rgba(255,255,255,.8);
		font-size: 0;
		border-radius: 3px;
	}
	.dot a{
		width:40px;
		height:8px;
		margin:3px 5px;
		background: rgba(0,0,0,.6);
		display: inline-block;
		
	}
	.banner-show .active-banner{
		z-index: 3;
	}
	.banner-show .active-dot{
		background: deepskyblue;
	}
	
	
	/*导航*/
	.banner-nav{
		width:160px;
		height:440px;
		position: absolute;
		top:-40px;
		z-index: 20;
		background:rgba(0,0,0,.7);
		color:white;
		line-height:40px;
	}
	.banner-nav .top{
		background: black;
	}
	.top i{
		margin:0 20px;
	}
	.show-goods span,.show-goods i{
		display: inline-block;
		font-size: 14px;
		line-height:40px;
	}
	.navs-type>li{
		cursor:pointer;
	}
	.nav-icon{
		margin:0 20px 0 10px;
	}
	.nav-icon2{
		margin-right:10px;
	}
	.show-goods{
		width:140px;
		height:40px;
		line-height:40px;
		margin:0 10px;
		border-bottom:1px solid;
		border-bottom-color:rgba(255,255,255,.5);
	}
	
	.right-hide{
		width:1038px;
		box-sizing: border-box;
		height:400px;
		border:2px solid black;
		border-top:none;
		border-left:none;
		position: absolute;
		left:160px;
		top:40px;
		background: white;
		color:black;
		display: none;;
	}
	.navs-type>li:hover {
		background: rgba(255,255,255,.1);
	}
	
	.navs-type>li:hover .right-hide{
		display: block;
	}
	.nav-bar{
		width:5px;
		height:40px;
		background: red;
		position: absolute;
		left:0;
		top:0;
		z-index: 100;
		transition:0.4s
	}
	
</style>